<template>
	<view>
		<view class="header" :style="{ position: headerPosition, top: headerTop }">
			<view class="targetBox">
				<view class="target" v-for="(target, index) in orderbyList" @tap="select(index)" :key="index" :class="[target.selected ? 'on' : '']">
					{{ target.text }}
					<!-- 				<view v-if="target.orderbyicon" class="icon" :class="target.orderbyicon[target.orderby]"></view> -->
					<view v-if="target.orderbyicon" class="sorting">
						<uni-icons type="arrowup" size="12" color="#666" class="iconbtn" :class="target.selected&&target.orderbyicon[target.orderby]=='up'?'on':''"></uni-icons>
						<uni-icons type="arrowdown" size="12" color="#666" class="iconbtn" :class="target.selected&&target.orderbyicon[target.orderby]=='down'?'on':''"></uni-icons>
					</view>
				</view>
			</view>
			<view class="screen" @click="toggleCateMask('show')">
				{{i18n.screen}}
				<image src="../../../static/img/shaixuan.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 占位 -->
		<view class="place"></view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="product-list">
				<view class="product" v-for="(goods, index) in goodsList" :key="index" @tap="toGoods(goods.id)">
					<view class="imgBox">
						<image mode="aspectFit" :src="goods.mainImagePath"></image>
						<!-- <view class="tagBox">
							<view class="tags" :class="item.type == 'red' ? 'red' : item.type == 'yellow' ? 'yellow' : 'green'" v-for="(item, index) in goods.tags" :key="index">
								{{ item.title }}
							</view>
						</view> -->
					</view>
					<view class="name">{{ goods.name }}</view>
					<view class="info">
						<view class="price">{{ goods.price }}</view>
						<!-- <view class="slogan">{{ goods.slogan }}</view> -->
					</view>
				</view>
			</view>
			<view class="loading-text">{{ loadingText }}</view>
		</view>
		<!-- 筛选弹框 -->
		<view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''" @click="toggleCateMask">
			<view class="cate-content">
				<scroll-view scroll-y class="cate-list" @click.stop="stopClick">
					<view v-for="(item,index) in cateList" :key="item.value">
						<view class="cate-item b-b two">{{item.name}}</view>
						<checkbox-group @change="checkboxChange($event,item,index)">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(tItem,tindex) in item.child" :key="tItem.value">
								<view hidden>
									<checkbox :value="tItem.value" :checked="tItem.checked" />
								</view>
								<view class="cate-item b-b checkItem " :class="tItem.checked?'active':''">{{tItem.name}}</view>
							</label>
						</checkbox-group>
					</view>


				</scroll-view>
				<view class="footer">
					<view class="btn remake" @click.stop="remakeClick">
						{{i18n.reset}}
					</view>
					<view class="btn confirm" @click.stop="confirmClick">
						{{i18n.define}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			i18n() {
				return this.$t('goods-list')
			}
		},
		data() {
			return {
				goodsList: [],
				loadingText: '正在加载...',
				headerTop: '0px',
				headerPosition: 'fixed',
				cateMaskState: 0,
				orderbyList: [{
						text: '综合',
						selected: true,
						orderbyicon: false,
						orderby: 0
					},
					{
						text: '新品',
						selected: false,
						orderbyicon: false,
						orderby: 0
					},
					{
						text: '价格',
						selected: false,
						orderbyicon: ['up', 'down'],
						orderby: 0
					},
					{
						text: '信用',
						selected: false,
						orderbyicon: false,
						orderby: 0
					}
				],
				orderby: 'sheng',
				microShopId: '',
				config: {}, //已选三级分类id
				cateList: [{
						name: '折扣与服务',
						value: 'A',
						child: [{
								name: '自营',
								value: '201',
							},
							{
								name: '直降',
								value: '202',
							},
						]
					},

					{
						name: '分类',
						value: 'B',
						child: [{
								name: '手机通讯',
								value: '301',
							},
							{
								name: '日用百货',
								value: '302',
							},
						]
					},
					{
						name: '品牌',
						value: 'C',
						child: [{
								name: '小米',
								value: '401',
							},
							{
								name: '华为',
								value: '402',
							},
							{
								name: '苹果',
								value: '403',
							},
						]
					},
					{
						name: '机身内存',
						value: 'D',
						child: [{
								name: '64G',
								value: '501',
							},
							{
								name: '128G',
								value: '502',
							},
							{
								name: '256G',
								value: '503',
							},
						]
					},
				]

			};
		},
		onLoad: function(option) {
			const microShopId = uni.getStorageSync('microShopId');
			if (microShopId) {
				this.microShopId = microShopId;
				console.log(microShopId);
			}

			//option为object类型，会序列化上个页面传递的参数
			console.log(option.cid); //打印出上个页面传递的参数。
			uni.setNavigationBarTitle({
				title: option.name
			});

			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
			this.getGoodList(option.cid);
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = 'fixed';
			} else {
				this.headerPosition = 'absolute';
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(() => {
				this.reload();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showToast({
				title: '触发上拉加载'
			});
			let len = this.goodsList.length;
			if (len >= 40) {
				this.loadingText = '到底了';
				return false;
			} else {
				this.loadingText = '正在加载...';
			}
			let end_goods_id = this.goodsList[len - 1].goods_id;
			for (let i = 1; i <= 10; i++) {
				let goods_id = end_goods_id + i;
				let p = {
					goods_id: goods_id,
					img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款'
				};
				this.goodsList.push(p);
			}
		},
		methods: {
			reload() {
				// console.log('reload');
				// let tmpArr = [];
				// this.goodsList = [];
				// let end_goods_id = 0;
				// for (let i = 1; i <= 10; i++) {
				// 	let goods_id = end_goods_id + i;
				// 	let p = {
				// 		goods_id: goods_id,
				// 		img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
				// 		name: '商品名称商品名称商品名称商品名称商品名称',
				// 		price: '￥168',
				// 		slogan: '1235人付款'
				// 	};
				// 	this.goodsList.push(p);
				// }
			},
			//商品跳转
			toGoods(id) {
				// uni.showToast({ title: '商品' + e.goods_id, icon: 'none' });
				console.log(id);
				uni.navigateTo({
					url: `/pages/goods/goods?id=${id}`
				});
			},
			//排序类型
			select(index) {
				let tmpTis = this.orderbyList[index].text + '排序 ';
				if (this.orderbyList[index].orderbyicon) {
					let type = this.orderbyList[index].orderby == 0 ? '升序' : '降序';
					if (this.orderbyList[index].selected) {
						type = this.orderbyList[index].orderby == 0 ? '降序' : '升序';
						this.orderbyList[index].orderby = this.orderbyList[index].orderby == 0 ? 1 : 0;
					}
					tmpTis += type;
				}
				this.orderbyList[index].selected = true;
				let len = this.orderbyList.length;
				for (let i = 0; i < len; i++) {
					if (i != index) {
						this.orderbyList[i].selected = false;
					}
				}
				uni.showToast({
					title: tmpTis,
					icon: 'none'
				});
			},
			//显示分类面板
			toggleCateMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(() => {
					this.cateMaskState = state;
				}, timer)
			},
			stopClick() {},
			//分类点击
			checkboxChange(e, item, index) {
				let key = item.value
				this.config[key] = e.detail.value
				console.log(this.config)
				var newList = this.cateList[index].child,
					values = e.detail.value;
				for (var i = 0, lenI = newList.length; i < lenI; ++i) {
					const res = newList[i]
					if (values.includes(res.value)) {
						this.$set(res, 'checked', true)
					} else {
						this.$set(res, 'checked', false)
					}
				}
			},
			confirmClick() {
				console.log(this.starePrice, this.endPrice)
				this.cateMaskState = 2;
				setTimeout(() => {
					this.cateMaskState = 0;
				}, 300)
			},
			remakeClick() {
				this.config = ''
				this.cateMaskState = 2;
				setTimeout(() => {
					this.cateMaskState = 0;
				}, 300)
				// 刷新页面
				uni.redirectTo({
					url: '/pages/goods/goods-list/goods-list'
				})
			},
			getGoodList(categoryId) {
				if(this.$i18n.locale=='en-US'){
					var language='en_US'
				}else{
					var language='zh_CN'
				}
				console.log(language)
				console.log(categoryId)
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/product/list', //仅为示例，并非真实接口地址。
					data: {
						microShopId: this.microShopId,
						ecShopProductCategoryId: categoryId,
						language:language
					},
					method: 'GET',
					dataType: 'json',
					header: {
						'content-type': 'application/json ' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data.data);
						this.goodsList = res.data.data.list;
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.icon {
		font-size: 26upx;
		overflow: auto;
	}

	.header {
		width: 96%;
		padding: 0 2%;
		height: 79upx;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		border-bottom: solid 1upx #eee;

		.targetBox {
			width: 86%;
			display: flex;
			align-items: center;

			.target {
				width: 25%;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				margin-bottom: -2upx;

				&.on {
					color: #d91a36;
					border-bottom: 4upx solid #d91a36;
					font-weight: 600;
					font-size: 30upx;
				}

				.sorting {
					display: flex;
					flex-direction: column;
					font-size: 28upx;
					margin-left: 1%;

					// transform: scale(0.6);
					.iconbtn {
						margin: -8upx 0;

						&.on {
							color: #d91a36 !important;

							/* #ifdef MP */
							text {
								color: #d91a36 !important;
							}

							/* #endif */
						}
					}
				}
			}
		}

		.screen {
			width: 13%;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			height: 60upx;

			image {
				width: 28upx;
				height: 40upx;
			}
		}
	}

	.place {
		background-color: #ffffff;
		height: 100upx;
	}

	.goods-list {
		.loading-text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #979797;
			font-size: 24upx;
		}

		.product-list {
			width: 92%;
			padding: 0 4% 3vw 4%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.product {
				width: 48%;
				border-radius: 20upx;
				background-color: #fff;
				margin: 0 0 15upx 0;
				box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);

				// image{
				// 	width: 100%;
				// 	border-radius: 20upx 20upx 0 0;
				// }
				.imgBox {
					position: relative;

					image {
						width: 100%;
						height: 300rpx;
						border-radius: 20upx 20upx 0 0;
					}

					.tagBox {
						position: absolute;
						left: 2upx;
						bottom: 10upx;
						width: 100%;

						.tags {
							padding: 2upx 10upx;
							font-size: 24upx;
							margin-right: 10upx;
							border-radius: 5upx;
							color: #fff;
							display: inline-block;

							&.red {
								background-color: #d85f61;
							}

							&.yellow {
								background-color: #ffcc4a;
							}

							&.green {
								background-color: #6fd85f;
							}
						}
					}
				}

				.name {
					width: 92%;
					padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 30upx;
				}

				.info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					padding: 10upx 4% 10upx 4%;

					.price {
						color: #e65339;
						font-size: 30upx;
						font-weight: 600;
					}

					.slogan {
						color: #807c87;
						font-size: 24upx;
					}
				}
			}
		}
	}

	/* 分类 */
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;

		.cate-content {
			width: 630upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;

			.footer {
				display: flex;
				justify-content: space-around;
				background-color: #fff;
				margin-top: 20upx;

				.btn {
					width: 40%;
					height: 80upx;
					line-height: 80upx;
					border: 1px solid #666;
					border-radius: 50upx;
					text-align: center;

					&.confirm {
						color: #fff;
						border: 1px solid #d8122e;
						background-color: #d8122e;
					}
				}
			}
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .6);

			.cate-content {
				transform: translateX(0);
			}
		}

	}

	.cate-list {
		display: flex;
		flex-direction: column;
		height: 90%;

		.cate-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;

			&.checkItem {
				display: flex;
				width: 150upx;
				text-align: center;
				height: 60upx;
				line-height: 60upx;
				padding-left: 0;
				display: inline-block;
				background-color: #f4f4f4;
				border-radius: 40upx;
				margin: 10upx;
			}
		}

		.two {
			height: 64upx;
			color: #303133;
			font-size: 30upx;
		}

		.active {
			color: #b02920;
			background-color: #f5eded;
			border: 1upx solid #b02920;
		}
	}
</style>
